<template>
  <div class="global-padding">
    <el-form>
      <el-form-item label="文章标题">
        <el-input v-model="articleTitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="文章内容">
        <tinymce v-model="articleHtml" :height="300" />
      </el-form-item>
      <el-form-item label="优先级">
        <el-input v-model="priority" autocomplete="off" />
      </el-form-item>
      <el-select v-model="type" placeholder="面向群体">
        <el-option
          label="全体"
          value="0"
        />
        <el-option
          label="用户"
          value="1"
        />
        <el-option
          label="司机"
          value="2"
        />
      </el-select>
    </el-form>
    <el-button style="margin-top: 20px;" type="primary" @click="addNewArticle">发布通知</el-button>
  </div>
</template>

<script>
import request from '@/utils/request'
import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },
  data() {
    return {
      articleTitle: '',
      articleHtml: '',
      priority: '',
      type: ''
    }
  },
  methods: {
    addNewArticle() {
      if (this.articleTitle === '') {
        this.$message({
          type: 'warning',
          message: `请填写标题`
        })
        return
      }
      if (this.articleHtml === '') {
        this.$message({
          type: 'warning',
          message: `请填写正文`
        })
        return
      }
      request.post('article/articleAdd', {
        'articleHtml': this.articleHtml,
        'articleTitle': this.articleTitle,
        'priority': this.priority,
        'type': this.type
      }).then(res => {
        this.$message({
          type: 'info',
          message: `发布成功`
        })
        this.articleTitle = ''
        this.articleHtml = ''
        this.type = ''
        this.priority = ''
      })
    }
  }
}
</script>
